CSS תגיות עיצוב - Document Level style sheet. הגדרת עיצוב inline { ;ערך : תכונה ;ערך :תכונה } שם-התגית CSS תכנות בסביבת האינטרנט 1

Size: px

Start display at page:

Download "CSS תגיות עיצוב - Document Level style sheet. הגדרת עיצוב inline { ;ערך : תכונה ;ערך :תכונה } שם-התגית CSS תכנות בסביבת האינטרנט 1"

Griselda Dickerson
6 years ago
Views:

1 תכנות בסביבת האינטרנט 1 תגיות עיצוב - הגדרות עיצוב לגופן, צבע, יישור וכד'. קיימות חמש רמות לכתיבה והוספת עיצובים:.1 style - In Line עיצוב ברמת התגית..2 sheet - Document Level style עיצוב ברמת המסמך. 3. sheet - External style עיצוב ברמת האתר )עיצוב בגיליון מקושר(..4 Class - מחלקה..5 Classes - Generic מחלקות גנריות )כלליות(. הגדרת עיצוב inline >";ערך: תכונה ; ערך: תכונה" = style שם-התגית< העיצוב מהווה חלק מתכונות התגית: </h1> <h1 style="color: red; font-wieght: bold;"> my text דוגמאות: <body style = "background-color: red;"> לכל תגית מאותו סוג עלול להיות עיצוב שונה. הדף לא יראה אחיד. החסרון: הגדרת עיצוב ברמת המסמך Document Level style sheet ההגדרות נכתבות בחלק ה- head של הדף, בתוך תגית </style> <style type = "text/css"> הגדרה זו מבטיחה עיצוב אחיד לכל התגיות מאותו סוג, בדף הנוכחי. לכל תגית מגדירים את רשימת תכונות העיצוב שלה באופן הבא: לדוגמה: { ;ערך : תכונה ;ערך :תכונה שם-התגית <head> <title>insert title here</title> <style type="text/css"> body { background-color: lightblue; h1{ p{ </style> font-style: italic; font-weight: bold; font-style: oblique; font-weight: bolder; font-size: 15pt; </head>

2 תכנות בסביבת האינטרנט 2 עיצוב בגיליון מקושר External style sheet עיצוב ברמת האתר. קישור לקובץ css המכיל את העיצוב. ההוראה נרשמת בתוך ה- :head <link href = "style.css" type = text/css" rel = "stylesheet">.stylesheet במקרה שלנו הערך הינו.(relative) מגדיר את סוג המסמך - rel מגדיר את כתובת מסמך ה- - href.text/css מגדיר את סוג הקישור. במקרה שלנו - type שם קובץ העיצוב: style.css הגדרה זו מבטיחה שלכל הדפים באתר יהיה עיצוב דומה. הקובץ style.css יכיל רק את הגדרות ה- css )בדומה למה שרשמנו בתגית style ב-,head אך ללא התגית :)style body { background-color: lightblue; h1{ font-style: italic; font-weight: bold; אם מבקשים להכיל את אותה הגדרה על p{ font-style: oblique; font-weight: bolder; font-size: 15pt; יותר מתגית אחת, נוכל לרשום רשימה של תגיות: table, th, td { border: 1px solid blue; מחלקות classes אם יש הרבה תגיות מאותו סוג ורוצים שחלק מהן תהיינה בעיצוב אחד והאחרות בעיצוב אחר, ניצור מחלקות בעלות עיצוב שונה, ונשייך את המחלקה לתגית. מבנה: דוגמה: רושמ ם:י הגדרת מחלקה במקום בו כותבים את הגדרות :css שם המחלקה יהיה שם כרצוננו )מומלץ לבחור בשמות משמעותיים( שיוך התגית למחלקה המתאימה: { ערך : מאפיין ; ערך : מאפיין שם-מחלקה.שם-תגית שם-התגית.שם-המחלקה h1.suki { color: red; h1.muki { color : green; h1 { background-color: yellow; text-align: center; <h1 class="suki"> shalom </h1> הערה: המילה שלום תוצג בתגית h1 שעליה חלות הגדרות התגית )מירכוז וצבע הרקע( וגם הגדרות המחלקה )צבע הכתב(.

3 תכנות בסביבת האינטרנט 3 - Generic Classes מחלקות כלליות. כדי ליצור מחלקות שתהינה זמינות עבור התגיות מסוגים שונים, למשל עבור h1 וגם עבור,div נוכל ליצור זאת בעזרת מחלקה כללית: מבנה: דוגמא: )יש לרשום נקודה לפני שם המחלקה( כמובן יש ללכת לתגית שנרצה ולהכיל עליה את המחלקה הכללית ולרשום בתוכה: ערך : מאפיין ; ערך : מאפיין { שם-מחלקה. <style>.hadas { color:red <h1 class = "hadas"> yael </h1> שם המחלקה <div class = "hadas"> text text text </div> הערה: ניתן לעצב תגית ב- class אחד או ב- style אחד, אך לא בשניהם. צבע דוגמאות עיצוב color: colorname; color: #90Af34"; background-color: colorname; סימני קוד : RGB ספרות 0-9 אותיות // A - F שימוש בקוד RGB לצבע // #FF0000"; background-color: background-image: url(" או כל פורמט תמונה אחר, למשל gif, png, jpg // צבע צבע רקע תמונת רקע תיאור ערך דוגמה התמונה חוזרת אופקית background-repeat: repeat-x ראה דוגמה התמונה חוזרת אנכית background-repeat: repeat-y ראה דוגמה התמונה חוזרת אופקית ואנכית background-repeat: repeat ראה דוגמה התמונה אינה חוזרת )מופיעה פעם אחת) background-repeat: no-repeat ראה דוגמה הדוגמאות לקוחות מתוך אתר: he.html.net

4 תכנות בסביבת האינטרנט 4 גופנים font-family: Arial, David, "Times New Roman"; סוג גופן סגנון הגופן אם המחשב לא מוצא את הפונט הראשון הוא ינסה את הפונט שאחריו ברשימה. שים : שם הגופן Time New Roman מכיל תווי רווח ולכן הוא תחום בגרשיים. font-style: normal; font-weight: bold; normal, bold, bolder, lighter או מספרים משקל הגופן )הדגשה( גודל גופן )רגיל(,normal )נטוי(,italic )אלכסוני( oblique 12px; font-size: // גודל מוחלט בפיקסלים 12pt; font-size: // גודל מוחלט בנקודות ;120% font-size: // גודל יחסי באחוזים font-size: medium; אפשרויות: x-small, xx-small, small, medium, large, x-large, xx-large טקסט הזחת טקסט יישור טקסט קישוט הטקסט text-indent: 30px; הזחת השורה הראשונה בפסקה ב- 30 פיקסלים. text-align: right; right, left, center או justify )יישור דו-צידי( text-decoration: underline; )קו תחתי(,underline )קו עילי(,overline )קו חוצה( line-through

5 תכנות בסביבת האינטרנט 5 גבולות border-width: thick; border-width: 2px; רוחב גבול צבע גבול סגנון גבול, mediumו thin thick -או בערכים מספריים המציינים פיקסלים. שם הצבע או ערך הצבע בשיטת RGB border-color: #001100; border-style: solid; p { border: 1px solid blue; איחוד עיצובים התגית border

6 תכנות בסביבת האינטרנט 6 שוליים ומסגרות מודל התיבה ב- css מתאים לתגית body או פסקה { תגית margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; הגדרת מרחק מהשוליים margin או בשורה אחת: { margin: 100px 40px 10px 70px; הגדרת מסגרת padding לאלמנט יש ארבעה צדדים: צד עליון, צד ימין, צד תחתון וצד שמאל בהתאמה. ה- margin הוא המרחק מכל צד לאלמנט השכן )או מגבולות המסמך(. background: yellow; padding: 20px 20px 20px 80px; תגית h1 { h2 { background: orange; padding-left: 120px; מסגרת התגית תתמלא בצבע הרקע. מרחק הטקסט משולי המסגרת יהיה כמצוין )המרחק משמאל קובע את גודל ההזחה במצב ltr והמרחק מימין במצב.)rtl הרחבה ואפשרויות עיצוב נוספות באתר: he.html.net ממנו נלקחו הדוגמאות

טבלאות אם נרצה למקם תמונה ומלל זה ליד זה, או רצף של תמונות זו ליד זו כל פריט מיושר לכיוון אחר, נשתמש בטבלאות.

1 טבלאות אם נרצה למקם תמונה ומלל זה ליד זה, או רצף של תמונות זו ליד זו כל פריט מיושר לכיוון אחר, נשתמש בטבלאות. - - - - - - - - - טבלה - - - - - - - - - שורה בטבלה Table Row -